<template>
  <view class="ugo-search">
    <u-search
      placeholder="输入商品名称"
      v-model="keyword"
      @custom="handleSearch"
      @change="handleInputChange"
    ></u-search>

    <!-- 列表 -->
    <view class="search-list u-m-t-10">
      <navigator
        v-for="item in goodsKeyword"
        :key="item.goods_id"
        :url="`/pages/goods_list/goods_list?query=${item.goods_name}`"
        >{{ item.goods_name }}
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      goodsKeyword: [],
    };
  },
  methods: {
    // 搜索框值改变触发事件
    handleInputChange() {
      // this.goodsSearch(this.keyword);
      // console.log(this.keyword);

      // 解决方式一  好理解一些
      // this.$u.debounce(() => {
      //   this.goodsSearch(this.keyword);
      // }, 500);

      // 解决方式二 bind   了解
      // bind 修改this指向的同时 会返回一个函数   传递返回的函数需要用到的参数
      // 返回一个 接收参数的函数  不是用它修改this指向的功能
      this.$u.debounce(this.goodsSearch.bind(this, this.keyword), 1000);
    },

    // 根据搜索关键字 来返回 数据
    async goodsSearch(query) {
      if (!query) return;
      const res = await this.$u.get("/goods/qsearch", { query });
      console.log(res);
      this.goodsKeyword = res.message;
    },

    //输入关键字点击搜索跳转到商品列表
    handleSearch() {
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?query=${this.keyword}`,
      });
    },
  },
};
</script>

<style lang="scss">
.ugo-search {
  // background-color: #ff2d4a;
  padding: 15rpx 20rpx;
}

.search-list {
  navigator {
    font-size: 28rpx;
    padding: 20rpx;
  }
}
</style>